<template>
	<view style="position: absolute;padding-left: 40rpx;">
		<view v-show="value" class="recharge-main" :style="{width:`${rechargemainWidth}rpx`}" :class="value === true ? 'on' : ''">
			<view class="recharge-close"><uni-icons @tap="value=false" type="close" size="35" color="#fff"></uni-icons></view>
			<view class="recharge-content"> 
				<image  src="../static/recharge-logo.png"></image>
				<view class="recharge-content-title">
					<view class="title1">充值有优惠</view>
					<view class="title2">南京中灵实镜数字科技有限公司</view>
					
					<view class="price">
						<view class="price-item" :class="selectId === item.id ? 'on' : ''" :style="{width:`${rechargemainWidth-120}rpx`}" v-for="item in rechargeList" :key="item.id" @tap="select(item)" >
							<view class="price-item-text left">充<text  class="point">{{item.price}}</text>元</view>
							<view style=" height: 120rpx;border-left: 2rpx dashed #5d5d5d;"></view>
							<view  class="price-item-text right">送<text  class="point">{{item.give}}</text>元且享<text  class="point">{{item.discount}}</text>折</view>
							<view class="zhekou-tag">储值折扣</view>
						</view>

					</view>
					
					<view class="button" :style="{width:`${rechargemainWidth-130}rpx`}" @tap="gorechaege">去充值</view>
					<view class="button-bottom">本活动最终解释权归本店所有</view>
				</view>
				
			</view>
		</view>
		
		 <view class="mask panelmask" v-show="value" ></view>
	</view>
</template>

<script>
	import {
	  subscribeMessage
	} from "@/libs/order";
	import {
	  weappPay
	} from "@/libs/wechat";
	import {
	  rechargeWechat,
	  getRechargeApi
	} from "@/api/user";
	import {
	  add,
	  sub
	} from "@/utils/bc";
	import {
		mapGetters
	} from 'vuex';
	export default {
		name:"rechargePanel",
		data() {
			return {
				now_money:0,
				selectId:0,
				selectItem:{},
				value:false,
				rechargemainWidth:0,
				rechargeList:[
					{ id:1,price:25, discount:9.8, give:5 },
					{ id:2,price:50, discount:9.0, give:15 },
					{ id:3, price:100, discount:8.5, give:40 }
				]
			};
		},
		computed: mapGetters(['windowWidth',"userInfo"]),
		mounted: function () {
		  this.now_money = this.userInfo.nowMoney;
		  this.getRecharge();
		},
		created() {
			this.rechargemainWidth =  this.windowWidth/(uni.upx2px(100)/100) - 120
		},
		methods:{
			/**
			 * 充值额度选择
			 */
			getRecharge() {
			  getRechargeApi()
			    .then((res) => {
					this.rechargeList = [];
			      // this.picList = res.data.recharge_price_ways || [];
				  for (let i = 0; i < res.data.recharge_price_ways.length; i++) {
				  	let pic =  res.data.recharge_price_ways[i];
					let objec = {
						id:pic.id,
						price:pic.value.price,
						give:pic.value.give_price,
						discount:pic.value.discount
					}
					this.rechargeList.push(objec);
				  }
			    })
			    .catch((res) => {
			      uni.showToast({
			        title: err.msg || err.response.data.msg || err.response.data.message,
			        icon: "none",
			        duration: 2000,
			      });
			    });
			},
			select(item){
				this.selectId = item.id;
				this.selectItem = item;
			},
			open() {
				this.value = true
			},
			close() {
				this.value = false
			},
			gorechaege: function () {
			  let that = this;
			  
			  if(this.selectId == 0){
			    uni.showToast({
			      title: "请选择充值套餐",
			      icon: "none",
			      duration: 2000,
			    });
			    return;
			  }
			  
			let  prices = this.selectItem.price + this.selectItem.give;
			let  paid_price = this.selectItem.price * (this.selectItem.discount/10)
			  
			  rechargeWechat({
			      price: prices,
			      from: 'routine',
			      paid_price: paid_price,
			      rechar_id:  this.selectItem.id,
			    })
			    .then((res) => {
			      var data = res.data.data;
			      weappPay(res.data.data)
			        .then(() => {
			          prices = add(prices, paid_price);
			          that.now_money = add(prices, parseFloat(that.userInfo.nowMoney));
			          uni.showToast({
			            title: "支付成功",
			            icon: "success",
			            duration: 2000,
			          });
			          // #ifdef MP-WEIXIN
			          subscribeMessage()
			          // #endif
			          this.$yrouter.back();
			        })
			        .finally((res) => {
			          //if(typeof(res) == "undefined") return
			          uni.showToast({
			            title: res,
			            icon: "none",
			            duration: 2000,
			          });
			        })
			        .catch(function () {
			          uni.showToast({
			            title: "支付失败",
			            icon: "none",
			            duration: 2000,
			          });
			        });
			    })
			    .catch((err) => {
			      console.log(err);
			      uni.showToast({
			        title: err.msg || err.response.data.msg || err.response.data.message,
			        icon: "none",
			        duration: 2000,
			      });
			    });
			},
		}
	}
</script>

<style lang="scss">
.panelmask {
	    background-color: rgba(0, 0, 0, 0.3);
		
	}
	/* 定义从小变大并且抖动的动画 */
	@keyframes scaleAndShake {
	    0% {
	        transform: scale(0.5) translate3d(0, 100%, 0);
	    }
	    50% {
	        transform: scale(1.1) translate3d(0, 0, 0);
	    }
	    100% {
	        transform: scale(1) translate3d(0, 0, 0);
	    }
	}

	/* 应用动画到 .recharge-main 类 */
	.recharge-main {
	    position: fixed;
	    z-index: 59;
	    top: 100rpx;
	    transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
	    -webkit-transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
	    -moz-transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
	    -o-transition: all 0.3s cubic-bezier(0.25, 0.5, 0.5, 0.9);
	    animation: scaleAndShake 0.6s ease-out forwards; /* 添加动画效果 */
	}
	
	.recharge-main.on {
	    /* 当添加 .on 类时，恢复到正常状态 */
	    transform: scale(1) translate3d(0, 0, 0);
	    -webkit-transform: scale(1) translate3d(0, 0, 0);
	    -ms-transform: scale(1) translate3d(0, 0, 0);
	    -moz-transform: scale(1) translate3d(0, 0, 0);
	    -o-transform: scale(1) translate3d(0, 0, 0);
	}
	.recharge-main .recharge-close{
		    display: flex;
		    justify-content: flex-end;
		    width: 100%;
			height: 95rpx;
	}
	.recharge-main .recharge-content{
				border-radius: 40rpx;
		height: 947rpx;
		background: linear-gradient(to bottom, rgb(112,167,240) 0%, #fff 100%);
		display: grid;
		justify-items: center;
		grid-auto-rows: min-content;
		image{
			    width: 150rpx;
			    height: 150rpx;
			    position: absolute;
			    top: 36rpx;
			    left: 50%;
			    transform: translateX(-50%);
		}
	}
	.recharge-content .recharge-content-title .title1{
		color: #1E2572;
		font-size: 48rpx;
	}
	.recharge-content .recharge-content-title .title2{
		color: #1E2572;
		font-size: 24rpx;
		margin-top: 25rpx;
	}
	.recharge-content .recharge-content-title{
		color: #1E2572;
		margin-top: 84rpx;
		display: grid;
		justify-items: center;

	}
	.price{
		margin-top: 25rpx;
	}
	.price-item{
		    background: linear-gradient(to left, #9ad3e8 0%, #fff 100%);
		    display: flex;
		    justify-content: center;
		    height: 160rpx;
		    border-radius: 40rpx;
		    justify-items: center;
		    align-items: center;
			margin-bottom: 25rpx;
			box-shadow: 4rpx 4rpx 15rpx rgba(0, 0, 0, 0.3);;
	}
	.price-item.on{
		box-shadow: inset 4rpx 4rpx 15rpx rgba(0, 0, 0, 0.3);;
	}
	.price-item-text{
		    font-size: 30rpx;
		    color: #717171;
		    justify-content: center;
		    width: 100%;
		    display: flex;
		   
		    align-items: center;
	}
	.price-item-text .point{
		color: #1E2572;
		font-size: 40rpx;
	}
	.left{
		width: 35%;
	}
	.right{
		width: 65%;
	}
	.zhekou-tag {
	        position: absolute;
	        right: 60rpx;
	        width: 95rpx;
	        height: 32rpx;
	        display: flex;
	        font-size: 18rpx;
	        background-color: #67A2F2;
	        color: #4756DE;
	        margin-bottom: 135rpx;
	        border-radius: 18rpx 40rpx 18rpx 18rpx;
	        place-content: center;
	}
	.button{
		height: 90rpx;
		background: linear-gradient(to right,  rgb(51,102,255) 0%, rgb(146,171,247) 100%);
		border-radius: 50rpx;
		    display: flex;
		    place-content: center;
		    align-items: center;
		    font-size: 45rpx;
	}
	.button-bottom{
		width: 100%;
		display: flex;
		place-content: center;
		width: 100%;
		font-size: 20rpx;
		margin-top: 18rpx;
		color: #767676;
	}
</style>